<template>
  <div>
    <a-icon type="search" v-if="iconModel" @click="onSearchDepUser" :disabled="disabled" />
    <a-input-search
      v-else
      v-model="userNames"       
      placeholder="请先选择用户"
      readOnly
      unselectable="on"
      @search="onSearchDepUser">
      <a-button slot="enterButton" :disabled="disabled" :icon="searchIcon?'search':''">{{searchIcon?'':'选择用户'}}</a-button>
    </a-input-search>
    <x-select-user-by-dep-modal ref="selectModal" :params="params" :userType="userType" :modal-width="modalWidth" :multi="multi" @ok="selectOK" :user-ids="value" @initComp="initComp"/>
  </div>
</template>
<script>
import JSelectUserByDep from '../jeecgbiz/JSelectUserByDep'
import XSelectUserByDepModal from './XSelectUserByDepModal'
export default {
    name:'XSelectUserByDep',
    props:{
      iconModel:Boolean,
      searchIcon:Boolean,
      userType:String,
      params:Object
    },
    components:{
      XSelectUserByDepModal
    },
    mixins:[JSelectUserByDep],
    methods:{
        selectOK(rows, idstr) {
            if (!rows) {
              this.userNames = ''
              this.userIds = ''
            } else {
              let temp = ''
              for (let item of rows) {
                  temp += ',' + item.realname
              }
              this.userNames = temp.substring(1)
              this.userIds = idstr
            }
            this.$emit("selected", {name:this.userNames,value:this.userIds,row:rows})
            this.$emit("change", this.userIds)
        },
        initComp(userNames,userIds,rows){
          this.userNames = userNames
          this.$emit("selected", {name:userNames,value:userIds,rows:rows})
        }
    }
}
</script>